<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 -->
<!-- 
* @desc:服务器管理
* @fileName:host-config.vue
* @author:zhouyongjie@yzbdl.ac.cn
* @date:2022-4-8
!-->
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
// 引入服务器管理搜索组件
import HostSearch from "./components/host-search.vue";
//引入服务器管理详情组件
import HostDetails from "./components/host-details.vue";
// 引入服务器管理分页
import HostPagination from "@/components/common/pagination.vue";
//引入服务器管理右侧新增窗口
import HostDrawer from "./components/drawer/host-drawer.vue";
//匹配用户名
import { idToAccount } from "@/common/util/idToAccount";
import { getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { showErrorMessage } from "@/common/message";
const { proxy } = getCurrentInstance() as any;

const route = useRoute();

//控制新增弹窗显隐
const drawershow = ref(false);
const direction = ref("rtl");
//详情数据
const listData = reactive({
  tableData: [],
  total: 0,
  isListLoading: false,
  status: route.query.status,
});

// 定义请求数据
let reqData = {
  groupId: "",
  keyword: "",
  status: "",
  page: 1,
  pageSize: 30,
};
const dataShow = ref(false);

/**
 * @description:查询方法
 * @param {any} serachParam
 * @return void / {返回类型} 描述信息
 */
const searchFunc = (serachParam: any) => {
  reqData.keyword = serachParam.hostValue;
  reqData.status = serachParam.status;
  reqTableList();
};

/**
 * @description:新增方法
 * @param {boolean} showdrawer
 * @return void
 */
const addNewFunc = (showdrawer: boolean) => {
  drawershow.value = showdrawer;
};

/**
 * @description:获取当前分页页码
 * @param {number} pageNumber
 * @return void
 */
const getCurrentPageNumber = (pageNumber: number) => {
  reqData.page = pageNumber;
  reqTableList();
};

/**
 * @description:改变每页显示数量
 * @param {pageNumber} 页码
 * @reture viod
 */
const changePageSize = (pageNumber: number) => {
  reqData.pageSize = pageNumber;
  reqTableList();
};

/**
 * @description:获取列表请求方法
 * @return void
 */
const reqTableList = () => {
  listData.isListLoading = true;
  const res = proxy.$HTTP.post({
    url: `/resource/server/query`,
    params: {
      page: reqData.page,
      size: reqData.pageSize,
    },
    data: {
      serverName: reqData.keyword,
      status: reqData.status,
    },
  });
  res.then((res: any) => {
    if (res.isOk) {
      let listArray = res.data.records;
      const ids = res.data.records.map((item: any) => {
        return item.createId;
      });
      let newId = Array.from(new Set(ids));
      const creaters = idToAccount(newId);
      creaters.then((res: any) => {
        if (res.isOk === true) {
          const ids = res.data;
          const idsMap: any = {};
          ids.forEach((id: any) => {
            idsMap[id.id] = id.nickName;
          });
          listData.tableData = listArray.map((m: any) => {
            m.createId = idsMap[m.createId]
              ? idsMap[m.createId]
              : "用户已被删除";
            return m;
          }) as any;
        }
      });

      listData.isListLoading = false;
      listData.total = Number(res.data.total);
      if (listData.total > 0) {
        dataShow.value = true;
      } else {
        dataShow.value = false;
      }
    }
  });
  res.catch((error: any) => {
    if (error.data instanceof Array) {
      showErrorMessage({
        message: error.data[0].errorMsg,
      });
    } else {
      showErrorMessage({
        message: error.data,
      });
    }
  });
};

/**
 * @description:新增表单提交方法
 * @param {any} submitParam
 * @return void
 */
const submitFunc = (submitParam: any) => {
  drawershow.value = false;
  reqTableList();
};

/**
 * @description:列表刷新函数
 * @param {any} fresParam
 * @return void
 */
const fresFunc = (fresParam: any) => {
  reqTableList();
};

/**
 * @description:删除数据方法
 * @param {any} deleteParam
 * @return void
 */
const deleteFunc = (deleteParam: any) => {
  reqTableList();
};
// 初始化加载数据
onMounted(() => {
  reqTableList();
});
</script>

<template>
  <div class="page-list">
    <!-- 列表文字 -->
    <div class="page-title-words"></div>
    <!-- 表单 -->
    <div class="page-table">
      <!-- 查询 -->
      <host-search
        :searchFunc="searchFunc"
        :addNewFunc="addNewFunc"
        :isSearchLoading="listData.isListLoading"
        :status="listData.status"
      ></host-search>
      <!-- 详情 -->
      <host-details
        :listData="listData.tableData"
        :dataShow="dataShow"
        :status="listData.status"
        :isListLoading="listData.isListLoading"
        :deleteFunc="deleteFunc"
        :fresFunc="fresFunc"
      ></host-details>
      <!-- 分页 -->
      <host-pagination
        :total="listData.total"
        :pageSize="reqData.pageSize"
        :change-page-size="changePageSize"
        style="margin-top: 30px"
        :getCurrentPageNumber="getCurrentPageNumber"
      ></host-pagination>
    </div>
    <el-dialog
      v-model="drawershow"
      v-if="drawershow"
      title="新增"
      :width="740"
      :direction="direction"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- 新增弹窗 -->
      <host-drawer :submitFunc="submitFunc"></host-drawer>
    </el-dialog>
  </div>
</template>
<style scoped>
.successMessage {
  opacity: 90%;
  width: 200px;
  color: #fff;
  height: 60px;
  background-color: #55d66b !important;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
.errorMessage {
  opacity: 90%;
  color: #fff;
  width: 200px;
  height: 60px;
  background-color: #e85a5a !important;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
.el-message {
  min-width: 200px !important;
  height: 60px !important;
}
.el-message .el-message-icon--success {
  color: #fff;
}
.el-message--success .el-message__content {
  color: #fff;
  /* font-weight: 700; */
  font-size: 14px;
}
.el-message .el-message-icon--error {
  color: #fff;
}
.el-message--error .el-message__content {
  color: #fff;
  /* font-weight: 700; */
  font-size: 14px;
}
</style>
<style lang="scss" scoped>
.page-list {
  position: relative;
  margin-right: -20px;
  height: calc(100vh - 130px);
  .page-title-words {
    font-size: 16px;
    color: #000;
    padding-bottom: 15px;
  }
  :deep(.el-dialog__header) {
    margin: 0px !important;
    border-bottom: 1px solid #ccc;
  }
}
</style>
